import React from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react'

import { withStyles } from 'material-ui/styles';
import SwipeableViews from 'react-swipeable-views';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

import sytle from './style'
import UserStore from '../../stores/user_store'

function TabContainer({ children, dir }) {
  return (
    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
      {children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
  dir: PropTypes.string.isRequired,
}

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class FullWidthTabs extends React.Component {
  handleChange = (event, value) => {
    this.props.user.changeTab(value)
  };

  handleChangeIndex = (index) => {
    this.props.user.changeTab(index)
  };

  render() {
    const {
      classes,
      theme,
      titles,
      content,
      user,
    } = this.props;
    const { tabIndex } = user
    const value = tabIndex <= titles.length ? tabIndex : 0
    return (
      <div className={classes.root}>
        { titles && titles.length ?
          <AppBar position="static" color="default">
            <Tabs
              value={value}
              onChange={this.handleChange}
              indicatorColor="primary"
              textColor="primary"
              scrollable
              scrollButtons="auto"
            >
              {
                titles.map(item => (
                  <Tab
                    className={classes.tabLabel}
                    label={<span className={classes.lableText}>{item}</span>}
                    key={item}
                  />
                ))
              }
            </Tabs>
          </AppBar>
            :
          null
        }
        { content && content.length ?
          <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
            index={value}
            onChangeIndex={this.handleChangeIndex}
          >
            { content.map(item => (
              <TabContainer dir={theme.direction} key={item.type.displayName}>
                {
                  item
                }
              </TabContainer>
              ))
            }
          </SwipeableViews>
            :
          null
        }
      </div>
    );
  }
}

FullWidthTabs.propTypes = {
  classes: PropTypes.objectOf(Object),
  theme: PropTypes.objectOf(Object),
  titles: PropTypes.arrayOf(Object),
  content: PropTypes.arrayOf(Object),
  user: PropTypes.instanceOf(UserStore),
};
export default withStyles(sytle, { withTheme: true })(FullWidthTabs);

